<template>
  <view class="head-wrapper">
      <image src="https://www.douluodalu.icu:9000/school/static/head_topic.png" @click="toTopic" class="head-topic"></image>
    <u-tabs
        :current="tagIndex"
        @click="toScroll"
        :list="list4"
        lineWidth="20"
        lineHeight="7"
        :lineColor="`url(${lineBg}) 100% 100%`"
        :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }"
        :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
    }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
    >
    </u-tabs>
      <image src="https://www.douluodalu.icu:9000/school/static/search.png" @click="toSearch"  class="search"></image>


  </view>
  <view class="content">
    <swiper :current="tagIndex" class="swiper" :circular="false" @change="swiperChange" swiperDuration="250">

      <swiper-item>
        <scroll-view scroll-y style="height: 100vh">
        <Blog/>
        <Blog/>
        <Blog/>
        <Blog/>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100vh">
          <Blog/>
          <Blog/>
          <Blog/>
          <Blog/>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100vh">
          <Blog/>
          <Blog/>
          <Blog/>
          <Blog/>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view scroll-y style="height: 100vh">
          <Blog/>
          <Blog/>
          <Blog/>
          <Blog/>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>

</template>

<script>
import Blog from "@/components/Blog.vue";

export default {
  components: {Blog},
  data() {
    return {
      tagIndex: 0,
      lineBg: "",
      list4: [
        {name: '关注'},
        {name: '推荐', badge: {isDot: true}},
        {name: '视频',},
        {name: '图文',}],
    };
  },
  methods: {
    toSearch(){
      uni.navigateTo({url: '/pages/search/search'})
    },
    toTopic(){
      uni.navigateTo({url: '/pages/topic/AllTopic'})
    },
    toScroll(event) {
      this.tagIndex = event.index
    },
    swiperChange(event) {
      this.tagIndex = event.detail.current
    },
  },
  created() {
  },
};
</script>

<style>
.head-wrapper{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.head-topic{
  padding-top: 5px;
  width: 25px;
  height: 25px;
}
.search{
  padding-top: 5px;
  padding-right: 5px;
  width: 20px;
  height: 20px;
}



.title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
}

.swiper {
  height: calc(100vh - 120rpx);
}

.wrap_content {
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  height: 100vh;
  color: aqua;
  font-size: 80px;
  margin: 0rpx 40rpx;
}
</style>
